<template>
    <div>
        <el-table :data="tableData"
                  :border="propJson.isBorder"
                  :stripe="propJson.isStripe"
                  :show-overflow-tooltip="propJson.isOverFlowTip"
                  :max-height="propJson.isMaxHeight ? propJson.maxHeight : -1"
                  :style="propJson.editFlag ? 'width: 98%; margin-left: 1%;' : ''"
                  @selection-change="tableSelect"
                  :row-key="propJson.rowKey"
                  :default-expand-all="propJson.isTreeView && propJson.isShowAllChildren"
                  :tree-props="childrenNodeProp"
                  :info2="getDynamicColumns"
        >
            <el-table-column v-if="propJson.isSelection" type="selection" width="45" />
            <el-table-column v-for="item in resTableFiledList"
                             :prop="item.variableField"
                             :label="item.variableLabel"
                             :align="item.isAlignCenter">
                <template #default="scope" v-if="item.showType === 'custom'">
                    <slot :name="item.variableLabelEN" :scope="scope"></slot>
                </template>
            </el-table-column>

            <el-table-column align="center" :width="propJson.operationWidth ? propJson.operationWidth : 300" v-if="propJson.isAddOperate">
                <template #header>
                    <span>操 作</span>
                </template>
                <template #default="scope">
                    <slot :name="propJson.operateName" :scope="scope"></slot>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script name="TableComponent" setup lang="ts">
import {commonParamChange} from "@/utils/commonParamUtil";
import {computed, defineProps, ref} from "vue";
import {doThirdServiceValue} from "@/utils/lowcode/thirdService.ts";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let childrenNodeProp = computed(() => {
    if (propJson.value.isTreeView) {
        return { children: propJson.value.childrenName, hasChildren: 'hasChildren' }
    } else {
        return { children: "ywu-no-child-unic", hasChildren: 'noChildren' }
    }
})

let resTableFiledList = ref([])

resTableFiledList.value = propJson.value.tableFieldList

let getDynamicColumns = computed( async() => {
    if (propJson.value.isDynamicColumns) {
        // 启用了动态列，需要获取对应动态列的数据
        await doThirdServiceValue(propJson.value.dynamicColumnsInfo, commonParam.value, execThen, () => {}, null)
    }
})

let tableData = computed(() => {
    if (propJson.value.editFlag) {
        return [];
    }
    // 判断参数类型是自定义的还是关联参数
    if (propJson.value.tableDataType === "custom") {
        if (Array.isArray(propJson.value.tableDataCustomInfo)) {
            return propJson.value.tableDataCustomInfo
        } else {
            let newStr = propJson.value.tableDataCustomInfo.replaceAll("\'", "\"");
            return JSON.parse(newStr)
        }
    } else if (propJson.value.tableDataType === "variable") {
        // 循环遍历出对象
        for (let i = 0; i < commonParam.value.length; i++) {
            let commonInfo = commonParam.value[i]
            if (commonInfo.variableName === propJson.value.tableDataVariable) {
                let commonVariableValue = commonInfo.variableValue
                if (commonVariableValue === "" || commonVariableValue === undefined) {
                    return [];
                }
                if (Array.isArray(commonVariableValue)) {
                    return commonVariableValue
                } else {
                    return JSON.parse(commonVariableValue)
                }
            }
        }
        return [];
    }
})

function tableSelect(val) {
    // 获取变量名称
    let paramName = propJson.value.selectVarParamName
    commonParamChange(commonParam.value, paramName, val)
}

function execThen(resValue) {
    let tempList = [];
    for (let index = 0; index < propJson.value.tableFieldList.length; index++ ) {
        tempList.push(propJson.value.tableFieldList[index])
    }
    for (let i = 0; i < resValue.length; i++) {
        let tempItem = resValue[i];
        let item = {
            variableLabel: tempItem.columnName,
            variableField: tempItem.columnField
        }
        tempList.push(item);
    }
    resTableFiledList.value = tempList;
}
</script>

<style scoped lang="less">

</style>